{% if carousel and active %}
    {% set slides = carousel.slides.visible() %}
{% else %}
    {% set slides = [] %}
{% endif %}

{# check for custom colors #}
<style>
    {% if carousel.arrows_color %}
    .owl-nav .owl-prev, .owl-nav .owl-next {
        color: {{ carousel.arrows_color }} !important;
    }
    {% endif %}
{% for slide in slides %}
    {% if slide.inactive_dot_color %}
    .owl-dot:nth-child({{ loop.index }}) {
        border-color: {{ slide.inactive_dot_color }} !important;
    }
    {% endif %}
    {% if slide.active_dot_color %}
    .owl-dot:nth-child({{ loop.index }}).active {
        border: 1px solid {{ slide.active_dot_color }} !important;
        background-color: {{ slide.active_dot_color }} !important;
    }
    {% endif %}
{% endfor %}
.carousel-title-text {
    padding: 4rem;
    font-size: 3.25rem;
    color: white;
    text-shadow: -1px 1px 2px #000, 1px 1px 2px #000, 1px -1px 0 #000, -1px -1px 0 #000;
    text-align: center;
}
.carousel-text {
    padding: 1rem 5rem;
    font-size: 1.65rem;
    color: white;
    text-shadow: -1px 1px 0 #000, 1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
    text-align: center;
    white-space: break-spaces;
}
</style>

{% if slides|length %}
<section{% if type == "banner_box" %} class="carousel-banner-section"{% endif %}>
    {% if type == "carousel" %}
        <div
            class="owl-carousel carousel-plugin one"
            data-autoplay="{% if carousel.interval > 0 %}true{% else %}false{% endif %}"
            data-interval="{{ carousel.interval * 1000 }}"
            data-arrows-visible="{{ carousel.is_arrows_visible }}"
            data-pause-on-hover="{{ carousel.pause_on_hover }}"
            data-use-dot-navigation="{{ carousel.use_dot_navigation }}">
    {% elif type == "banner_box" %}
        {% if title %}
            <div class="title-bar light">
                <h2>{{ title }}</h2>
            </div>
        {% endif %}
        <div
            class="owl-carousel carousel-plugin banner"
            data-slide-count="{{ slides|length }}"
            data-arrows-visible="{{ carousel.is_arrows_visible }}">
    {% endif %}
    {% for slide in slides %}
        {% set link = slide.get_link_url() %}
        {% set cropped_slide = slide|thumbnail(size=(carousel.image_width, carousel.image_height), crop="smart", upscale=True) %}
        {% set caption = slide.get_translated_field("caption") or "" %}
        {% set caption_text = slide.get_translated_field("caption_text") or "" %}

        {% if link %}<a href="{{ link }}" target="{{ slide.get_link_target() }}" class="col-inner" style="text-decoration: none;" data-toggle="tooltip" title="{{ caption_text }}">{% endif %}
            <div style="background-image: url({{ cropped_slide }}); height: {{carousel.image_height}}px; color: white;" alt="{{ caption }}" title="{{ caption }}. {{ caption_text }}">
            {% if type == "carousel" %}
                <div class="carousel-title-text" style="">{{ caption }}</div>
                <p class="carousel-text" style="">{{ caption_text }}</p>
            {% elif type == "banner_box" %}
                <div class="carousel-title-text"
                    style="display: flex; align-items: center; height: 100%">{{ caption }}</div>
            {% endif %}
            </div>
        {% if link %}</a>{% endif %}
    {% endfor %}
    </div>
</section>
{% endif %}
